<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { ArticleItem, ArticleResData, AxiosResData } from '@/types';
import axios from 'axios';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const store = useChannelStore();

const articleList = ref<ArticleItem[]>([]);

watch(() => store.activeChannelId, async() => {
  const res = await axios.get<AxiosResData<ArticleResData>>('http://geek.itheima.net/v1_0/articles', {
    params: {
      channel_id: store.activeChannelId,
      timestamp: Date.now()
    }
  });
  articleList.value = res.data.data.results;
}, { immediate: true });

const router = useRouter();
</script>

<template>
  <div class="article-list">
    <div class="article-item" 
    v-for="item in articleList" 
    :key="item.art_id" 
    @click="router.push({ name: 'detail', params: { id: item.art_id } })"
    >
      <p class="title">{{ item.title }}</p>
      <img v-for="img in item.cover?.images" class="img" :src="img" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>